<template>
  <div class="com-toolBar" :class="unAuthAll ? 'unAuth_all' : ''">
    <template v-for="(btn, index) in showListFixAuth">
      <el-tooltip
        :disabled="!btn.toolTip"
        class="item"
        effect="dark"
        :content="btn.toolTip"
        placement="top-start"
        :key="'neuToolbar' + index"
      >
        <el-badge
          class="badge-btn"
          v-if="btn.isBadge && btn.isIconBtn"
          :value="btn.badge.value()"
          :max="btn.badge.max"
          :is-dot="btn.badge.isDot"
          :hidden="btn.badge.hidden()"
          :type="btn.badge.type || 'danger'"
        >
          <i
            v-if="btn.isIconBtn && showButton(btn)"
            :class="getClass(btn)"
            aria-hidden="true"
            class="icon-button"
            @click="btn.func"
            :accesskey="btn.accesskey"
          ></i>
        </el-badge>
        <el-button
          v-if="
            (btn.isUpload === undefined || btn.isUpload === false) &&
              (btn.isDropdown === undefined || btn.isDropdown === false) &&
              (btn.isBadge === undefined || btn.isBadge === false) &&
              (btn.isIconBtn === undefined || btn.isIconBtn === false) &&
              showButton(btn)
          "
          :type="btn.type"
          :size="btn.size"
          :class="btn.class"
          :plain="btn.plain"
          :icon="btn.icon"
          :circle="btn.circle"
          :disabled="btn.disabledMethod ? btn.disabledMethod() : btn.disabled"
          @click="btn.func"
          :accesskey="btn.accesskey"
          ><i v-if="btn.i" :class="btn.iclass" />{{ btn.label }}
        </el-button>

        <el-upload
          v-if="btn.isUpload"
          ref="uploadBtn"
          class="upload-btn"
          :action="baseUrl + btn.url || '127.0.0.1'"
          :file-list="neuFileList"
          :show-file-list="false"
          :on-success="btn.onSuccess"
          :on-change="btn.onChange"
          :accept="btn.accept"
          :auto-upload="btn.autoUpload || false"
          :http-request="upload"
          :disabled="btn.disabledMethod ? btn.disabledMethod() : btn.disabled"
          :data="btn.data ? btn.data() : {}"
          :headers="headers"
        >
          <el-button
            :key="index"
            :type="btn.type"
            :size="btn.size"
            :class="btn.class"
            :plain="btn.plain"
            :icon="btn.icon"
            :circle="btn.circle"
            @click="upLoadBtnClick(btn)"
            :disabled="btn.disabledMethod ? btn.disabledMethod() : btn.disabled"
            ><i v-if="btn.i" :class="btn.iclass" />{{ btn.label }}
          </el-button>
        </el-upload>
        <el-dropdown
          class="dropdown-btn"
          v-if="btn.isDropdown && showButton(btn)"
          trigger="click"
          @command="btn.func"
        >
          <el-button
            :type="btn.type"
            :size="btn.size"
            :class="btn.class"
            :plain="btn.plain"
            :icon="btn.icon"
            :circle="btn.circle"
            :disabled="btn.disabledMethod ? btn.disabledMethod() : btn.disabled"
          >
            <i v-if="btn.i" :class="btn.iclass" />{{ btn.label
            }}<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in btn.itemList"
              :key="index"
              :command="item.command"
              :disabled="
                item.disabledMethod ? item.disabledMethod() : item.disabled
              "
              >{{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-badge
          class="badge-btn"
          :value="btnData[btn.prop]"
          v-if="btn.isBadge"
        >
          <el-button
            :type="btn.type"
            :size="btn.size"
            :class="btn.class"
            :plain="btn.plain"
            :icon="btn.icon"
            :circle="btn.circle"
            :disabled="btn.disabledMethod ? btn.disabledMethod() : btn.disabled"
            @click="btn.func"
            :accesskey="btn.accesskey"
            ><i v-if="btn.i" :class="btn.iclass" />{{ btn.label }}
          </el-button>
        </el-badge>
      </el-tooltip>
    </template>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import _ from "lodash";

export default {
  name: "com-toolBar",
  props: {
    btnList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    btnData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    btnList(newVal) {
      this.updateshowListFixAuth(newVal);
    }
  },
  data() {
    return {
      showListFixAuth: [],
      unAuthAll: false,
      headers: {},
      baseUrl: "",
      neuFileList: [],
      uploadBtn: ""
    };
  },
  created() {
    const xsrfToken = localStorage.getItem("XSRF-TOKEN");
    this.headers = {
      "X-XSRF-TOKEN": xsrfToken
    };
    this.updateshowListFixAuth(this.btnList);
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API;
  },
  methods: {
    updateshowListFixAuth(data) {
      let self = this;
      this.showListFixAuth = _.filter(data, item => {
        return true;
      });
      this.unAuthAll = this.showListFixAuth.length > 0 ? false : true;;
    },
    showButton(btn) {
      const type = typeof btn.show;
      if (type === "function") {
        return btn.show();
      } else {
        return !(btn.show === false);
      }
    },
    upLoadBtnClick(btn) {
      this.uploadBtn = btn;
    },
    upload(params) {
      if (this.uploadBtn.func) {
        const file = params.file;
        return this.uploadBtn.func(file);
      }
    },
    getClass(btn) {
      let iconClass = btn.iconClass ? btn.iconClass : "";
      if (btn.disabledMethod()) {
        iconClass += " i-disabled";
      }
      return iconClass;
    }
  }
};
</script>
<style scoped lang="scss">
// 默认蓝色边框class值：com-btn-default
// 默认红色边框class值：com-btn-danger
.com-toolBar {
  position: relative;
  height: calc(50px - 16px);
  margin: 9px 0 9px 9px;
  background: #fff;

  .badge-btn,
  .upload-btn,
  .dropdown-btn {
    display: inline-block;
    margin: 0 8px;
  }

  .badge-btn {
    vertical-align: top;
  }

  .icon-button {
    margin: 0 8px;
    font-size: 30px;
    cursor: pointer;
  }
}

.unAuth_all {
  height: 0;
}

.i-disabled {
  pointer-events: none;
  cursor: not-allowed !important;
  color: #c0c4cc;
  background-image: none;
  background-color: #ffffff;
  border-color: #ebeef5;
}
</style>
